<template>
    <view class="content">
        <view class="box">
            <textarea v-model="content" maxlength="-1" :auto-height="true" placeholder="这一刻的想法..." class="t-inp"></textarea>
            <view class="img-box">
                <view class="u-rela" v-for="(item, index) in imgs" :key="index">
                    <image :src="item" class="up-icon2"></image>
                    <view class="del-img" v-if="item" @click="delImg(index)">删除</view>
                </view>
                <image :src="IMAGEURL + 'static/image/up.png'" class="up-icon2" v-if="imgs.length < 9" @click="chooseImage"></image>
            </view>
        </view>
        
        <view class="btn" @click="submit">确认发布</view>
    </view>
</template>

<script>
    import { IMAGEURL } from '@/static/js/common.js';
    import { URL } from '@/static/js/common.js';
    export default {
        data() {
            return {
                IMAGEURL,
                URL: URL, //上传图片用的
                content: '',
                imgs: [],
                imgsId: [],
            };
        },
        onLoad() {
            
        },
        methods: {
            submit() {
                if (!this.content && this.imgsId.length == 0) {
                    this.$toast('发布内容不能为空！')
                    return
                }
                this.$ajax('release_association', {
                	user_token: this.$getSync('userToken'),
                    content: this.content,//内容
                    image_ids: this.imgsId.join(',') || '',//图片id，分割字符串
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            chooseImage() {
                var _this = this;
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: function(res) {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            uni.uploadFile({
                                url: _this.URL + 'api/upload_image', //仅为示例，并非真实接口地址。
                                filePath: res.tempFilePaths[i],
                                name: 'image',
                                success: result => {
                                    let data = JSON.parse(result.data).detail; //后台返回的路径data.attach_uri
                                    _this.imgsId.push(data.image_id);
                                    _this.imgs.push(data.image);
                                }
                            });
                        }
                    }
                });
            },
            
            //删除照片
            delImg(index) {
                uni.showModal({
                    title: '提示',
                    content: '确定要删除照片吗？',
                    success: res => {
                        if (res.confirm) {
                            this.imgsId.splice(index, 1);
                            this.imgs.splice(index, 1);
                        } else if (res.cancel) {
                            
                        }
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .del-img{
        position: absolute;
        right: 10rpx;
        bottom: 12rpx;
        color: #FFFFFF;
        font-size: 22rpx;
        padding: 7rpx 12rpx;
        background-color: #000000;
        opacity: .7;
        border-radius: 5rpx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 25rpx;
    }
    .box{
        padding: 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
        font-size: 30rpx;
    }
    .flex-between{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .up-icon{
        width: 154rpx;
        height: 154rpx;
    }
    .inp{
        text-align: right;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .t-inp{
        width: 100%;
        min-height: 200rpx;
        height: auto;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 15rpx;
    }
    .up-icon2{
        width: 204rpx;
        height: 204rpx;
        margin-right: 10rpx;
        margin-bottom: 12rpx;
    }
    .up-icon2:nth-child(3n) {
        margin-right: 0;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin-top: 50rpx;
    }
    
    

</style>
